<template>
	<view v-if="!loading">
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>睡眠质量</u-row>
				<view class="smsj">
					<image style="width: 20px;height: 20px;margin-top: 4px;" src="../../static/images/homePage/ws.png">
					</image>
					00:25
				</view>
				<view class="smsj" style="right: 40px;left:auto">
					<image style="width: 24px;height: 24px;" src="../../static/images/homePage/bt.png"></image>
					07:25
				</view>
				<charts :option="option1" id="3" :height="132"></charts>
				<view class="sleep-type">
					<charts :option="option2" id="4" :height="142"></charts>
					<u-row justify="space-evenly">
						<view v-for="i in option3" :key="i.title" class="item-type">
							<view class="dot" :style="{backgroundColor:i.color}"></view>
							{{i.title}}
						</view>
					</u-row>
				</view>
				<view class="tip">注释：未超过1个小时的睡眠无法科学计算，均归类为零星小睡</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">睡眠分布 <view style="font-size: 12px;color:#999;font-weight: normal;">理想范围
					</view></u-row>
				<view class="sleep-time">
					<view v-for="time in option3" :key="time.title">
						<u-row justify="space-between">
							<view :style="{color:time.color}">{{time.title}}</view>
							<view style="color:#999">{{time.time}}</view>
						</u-row>
						<u-slider disabled :min="0" :activeColor="time.color" blockSize="12" v-model="time.value"></u-slider>
					</view>
				</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">睡眠概况
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<view class="sleep-gk">
					<view v-for="time in option4" :key="time.title">
						<u-row justify="space-between">
							<view :style="{color:time.color}">
								<u-row>
									{{time.title}}
									<view class="tag" :style="{background:time.typeBg,color:time.typeColor}">
										{{time.type}}
									</view>
								</u-row>
							</view>
							<view style="color:#999">{{time.time}}</view>
						</u-row>
						<u-slider disabled :min="0" blockSize="12" v-model="time.value"></u-slider>
					</view>
				</view>
			</view>
		</view>
		<view v-for="item in list" :key="item.id">
			<sleepChartCard :chartData="item"></sleepChartCard>
		</view>
	</view>
</template>

<script>
	import {
		getRandomNumber
	} from "@/utils/index.js"
	import sleepChartCard from './components/sleep-chart-card.vue';
	export default {

		data() {
			let formater = function(v) {
				let str;
				if (v == "5") {
					str = '零星小睡';
				} else if (v == "1") {
					str = '快速眼动';
				} else if (v == "2") {
					str = '深睡';
				} else if (v == "3") {
					str = '浅睡';
				} else if (v == '4') {
					str = '清醒';
				}
				return str;
			}
			return {
				loading: true,
				option4: [{
						title: '睡眠时长',
						time: '6时50分',
						color: '#999',
						value: 7 * 8,
						type: '良好',
						typeBg: '#383218',
						typeColor: '#FFAE4B'
					}, {

						title: '在床时长',
						time: '0时6分',
						color: '#999',
						value: 0.6 * 8,
						type: '注意',
						typeBg: '#381C26',
						typeColor: '#FF2B2C'
					}, {
						title: '睡眠效率',
						time: '99%',
						color: '#999',
						value: 99,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '入睡时长',
						time: '3分',
						color: '#999',
						value: 0.3 * 8,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '平均心率',
						time: '64次/分',
						color: '#999',
						value: 64,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '平均HRV',
						time: '44ms',
						color: '#999',
						value: 44,
						type: '良好',
						typeBg: '#383218',
						typeColor: '#FFAE4B'
					}

				],
				option3: [{
					title: '零星小睡',
					time: '1时0分',
					color: '#4191F9',
					value: 1 * 8
				}, {
					title: '快速眼动',
					time: '0时6分',
					color: '#54D7A5',
					value: 0.6 * 8
				}, {
					title: '深睡',
					time: '2时24分',
					color: '#02A166',
					value: 2.5 * 8
				}, {
					title: '浅睡',
					time: '4时12分',
					color: '#FFD8BB',
					value: 4 * 8
				}, {
					title: '清醒',
					time: '0时3分',
					color: '#EE9060',
					value: 0.3 * 8
				}],
				option2: {
					tooltip: {
						trigger: 'axis', // 触发类型为坐标轴
						axisPointer: {
							type: 'shadow' // 阴影指示器
						}
					},
					legend: {
						show: false,
					},
					grid: [{
						left: '20',
						right: '20',
						top: '20%',
						height: '80%',
						containLabel: "true"
					}],
					xAxis: [{
						gridIndex: 0,
						splitLine: {
							show: false
						},
						data: [],
						axisLabel: {
							align: 'center',
							showMinLabel: true,
							showMaxLabel: true,
							margin: 15,
							textStyle: {
								color: '#999',
								fontSize: 12,
							},
						},
						axisLine: {
							show: true,
						},
						axisTick: {
							show: false,
						},
					}, ],
					yAxis: [{
						min: 0,
						max: 5,
						axisLabel: {
							show: false,
							textStyle: {
								// color: 'rgba(255,255,255,0.40)',
								fontSize: 12,
							},
							verticalAlign: 'top',
							padding: [0, 0, 0, 0],
							formatter: function(parmas) {
								return formater(parmas)
							}
						},
						splitLine: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
					}, ],

					series: [{
							name: '',
							type: 'bar',
							xAxisIndex: 0,
							yAxisIndex: 0,
							data: [],
							stack: 'ad',
							tooltip: {
								show: false
							},
							itemStyle: {
								color: "rgba(0,0,0,0)",
								borderColor: "rgba(0,0,0,0)",
							}
						},
						{
							name: '睡眠数据',
							type: 'bar',
							xAxisIndex: 0,
							yAxisIndex: 0,
							data: [],
							stack: 'ad',
							// barWidth: "100%",
						},
					],
				},
				option1: {
					title: {
						top: '30%', // 垂直位置，调整这个值可以控制文本的上下位置
						subtext: '质量76分', // 副标题文本
						subtextStyle: {
							color: '#fff', // 副标题颜色
							fontSize: 14, // 副标题字体大小
						},
						text: `{time|小} `, // 使用富文本语法插入动态值
						left: 'center', // 水平居中
						textStyle: {
							color: "#fff",
							fontSize: 26,
							rich: {
								time: {
									fontSize: 10,
									color: "#fff",
								},
							}
						}
					},
					tooltip: {
						show: false,
					},
					series: [{
						type: "pie",
						radius: ["80%", "100%"],
						itemStyle: {
							borderRadius: [50, 90]
						},
						label: {
							normal: {
								position: "center",
							},
						},
						hoverAnimation: false,
						data: [{
								value: 93,
								name: '得分',
								itemStyle: {
									normal: {
										color: {
											type: "linear",
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
													offset: 0,
													color: "#F3D2BA ", // 0% 处的颜色
												},
												{
													offset: 0.5,
													color: "#5FB385", // 0% 处的颜色
												},
												{
													offset: 1,
													color: "#02A166", // 100% 处的颜色
												},
											],
											globalCoord: false, // 缺省为 false
										},

									},
								},
							},
							{
								value: 100 - 93,
								itemStyle: {
									color: '#292929'
								},
							}
						],
					}],
				},
				list: [{
					title: '心率',
					id: '11',
					info: [{
						title: '心率状态',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '正常',
					}, {
						title: '静息HR',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '54',
						unit: '次/秒',
					}, {
						title: '平均心率',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '74',
						unit: '次/秒',
					}],
					option: {
						grid: {
							top: "middle",
							left: "20px",
							height: "70%",
							bottom: "0px",
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},
						},
						yAxis: {
							type: 'value',
							max: 90,
							min: 30,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [150, 230, 224, 218, 135, 147, 260],
							type: 'line',
							symbolSize: 0,
							lineStyle: {
								width: 1,
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#02A166' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#FFD8BB' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
						}]
					}
				}, {
					title: '血氧浓度',
					id: '12',
					info: [{
						title: '血氧状态',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '正常',
					}, {
						title: '最低血氧',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '97',
						unit: '%',
					}, {
						title: '平均血氧',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '98',
						unit: '%',
					}],
					option: {
						grid: {
							top: "middle",
							left: "20px",
							height: "70%",
							bottom: "0px",
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['00', '01', '02', '03', '04', '05', '06'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},
							boundaryGap: true,
						},
						yAxis: {
							type: 'value',
							// min: 0,
							// max: 100,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [150, 230, 124, 128, 135, 147, 260],
							type: 'bar',
							barMaxWidth: 10,
							zlevel: 10,
							symbolSize: 0,
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(2, 161, 102, 1)'
										}, {
											offset: 1,
											color: 'rgba(2, 161, 102, 0)'
										}]
									},
									barBorderRadius: [30, 30, 0, 0],
									label: {
										show: false, //开启显示
										position: 'top', //在上方显示
										textStyle: {
											//数值样式
											color: 'rgba(31, 129, 255, 1)',
											fontSize: 12,
											fontWeight: 400,
										},
									},
								}
							},
						}]
					}
				}, {
					title: '心率变异性',
					id: '13',
					info: [{
						title: '心率状态',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '正常',
					}, {
						title: '最低心率',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '54',
						unit: '次/秒',
					}, {
						title: '平均心率',
						icon: require("../../static/images/homePage/zywz.png"),
						subTitle: '74',
						unit: '次/秒',
					}],
					option: {
						grid: {
							top: "middle",
							left: "20px",
							height: "70%",
							bottom: "0px",
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							axisLine: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},
						},
						yAxis: {
							type: 'value',
							max: 90,
							min: 30,
							splitLine: {
								show: true,
								lineStyle: {
									type: "dashed",
									color: "rgba(255,255,255,0.2)",
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: true,
								color: '#999',
								fontSize: '12px'
							},

						},
						series: [{
							data: [150, 230, 224, 218, 135, 147, 260],
							type: 'line',
							symbolSize: 0,
							lineStyle: {
								width: 1,
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#02A166' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#FFD8BB' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
						}]
					}
				}],
			}
		},
		components: {
			sleepChartCard
		},
		methods: {
			//获取随机睡眠数据0-4
			randomNum(n) {
				var res = [];
				for (var i = 0; i < n; i++) {
					res.push(getRandomNumber(0, 6));
				}
				return res;
			}
		},
		mounted() {
			this.loading = true
			let timeD = this.option1.series[0].data[0]
			this.option1.title.text =
				'0' + timeD.value.toString().substring(0, 1) + "{time|h}" +
				timeD.value.toString().substring(1, 2) + '0';
			let heartRateData = []
			for (let i = 0; i < 70; i++) {
				heartRateData.push(Math.random() * (75 - 50) + 50);
			}
			this.list[0].option.series[0].data = heartRateData
			this.list[0].option.xAxis.data = heartRateData.map((_, index) => `T${index}`)
			this.list[2].option.series[0].data = heartRateData
			this.list[2].option.xAxis.data = heartRateData.map((_, index) => `T${index}`)
			this.$forceUpdate()
			var stack = [],
				demodata = [],
				sleepData = [],
				timeData = []
			sleepData = this.randomNum(50)
			for (let i = 0; i < sleepData.length; i++) {
				stack.push(sleepData[i] * 1 - 1);
				let time = new Date((1696963225 + i * 60) * 1000);
				let hours = (time.getHours() < 10 ? '0' + time.getHours() : time.getHours()) + ':';
				let minutes = (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes());
				timeData.push(hours + minutes)
				let obj;
				if (sleepData[i] == 5) {
					obj = {
						value: 1,
						itemStyle: {
							color: '#4191F9',
							borderColor: '#4191F9',
						}
					}
				} else if (sleepData[i] == 1) {
					obj = {
						value: 1,
						itemStyle: {
							color: '#54D7A5',
							borderColor: '#54D7A5',
						}
					}
				} else if (sleepData[i] == 2) {
					obj = {
						value: 1,
						itemStyle: {
							color: '#02A166',
							borderColor: '#02A166',
						}
					}
				} else if (sleepData[i] == 3) {
					obj = {
						value: 1,
						itemStyle: {
							color: '#FFD8BB',
							borderColor: '#FFD8BB',
						}
					}
				} else if (sleepData[i] == 4) {
					obj = {
						value: 1,
						itemStyle: {
							color: '#EE9060',
							borderColor: '#EE9060',
						}
					}
				}
				demodata.push(obj);
			}
			this.option2.series[0].data = stack
			this.option2.series[1].data = demodata
			this.option2.xAxis[0].data = timeData
			this.loading = false
		},
	}
</script>

<style scoped lang="scss">
	.jkzs-border {
		border-radius: 12px;
		margin-bottom: 12px;
		overflow: hidden;
		position: relative;

		.jkzs {
			border: 1px solid;
			border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 16px;
			width: 100%;
			min-height: 113px;
			background: #0B0F12;
			box-shadow: inset 0px 0px 12px 6px #2C281F;
			font-weight: bold;
			font-size: 14px;

			.smsj {
				display: flex;
				flex-direction: column;
				font-size: 16px;
				font-weight: bold;
				position: absolute;
				top: 30%;
				left: 40px;
				align-items: center;
				gap: 6px
			}

			.tip {
				margin-top: 8px;
				font-weight: 500;
				font-size: 10px;
				color: #999999;
			}

			.sleep-type {
				.item-type {
					margin-top: 15px;
					display: inline-flex;
					align-items: center;
					font-size: 12px;
					margin-right: 5px;

					.dot {
						width: 5px;
						height: 5px;
						border-radius: 50%;
						margin-right: 6px;
					}
				}
			}

			.sleep-gk {
				font-weight: normal;
				font-size: 12px;
				padding-top: 20px;

				.tag {
					width: 36px;
					height: 17px;
					line-height: 17px;
					background: #381C26;
					border-radius: 4px;
					margin-left: 6px;
					font-size: 9px;
					text-align: center;
				}

				::v-deep .uni-slider-wrapper {
					margin: 0px -15px;
				}

				::v-deep .uni-slider-thumb {
					display: none;
				}

				::v-deep.uni-slider-tap-area {
					padding: 0;
				}

				::v-deep .uni-slider-track {
					background: linear-gradient(90deg, #F3D2BA 0%, #02A166 100%);
				}

				::v-deep .uni-slider-handle-wrapper {
					height: 5px;
					background-color: #1F2224 !important;
				}
			}

			.sleep-time {
				font-weight: normal;
				font-size: 12px;
				padding-top: 20px;

				::v-deep .uni-slider-wrapper {
					margin: 0px -15px;
				}

				::v-deep .uni-slider-thumb {
					display: none;
				}

				::v-deep.uni-slider-tap-area {
					padding: 0;
				}

				::v-deep .uni-slider-handle-wrapper {
					height: 20px;
					border-radius: 0px;
					background-color: #1F2224 !important;
				}

				::v-deep .uni-slider-track {
					border-radius: 0px;
				}
			}
		}



	}
</style>